<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>地点微调</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
    <style>

        body {
            background-color: whitesmoke;
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 350px;
            position: fixed;
            top: 50px;
        }

        #wapper {
            width: 100%;
            position: relative;
        }

        #container {
            height: 350px;
        }

        #arround {
            margin: 0px;
            padding: 0px;
            overflow: scroll;
            position: fixed;
            top: 400px;
            height: 250px;
        }

        #serach {
            padding-left: 2%;
            padding-bottom: 2%;
            padding-right: 2%;
            padding-top: 2%;
            height: 50px;
            position: fixed;
            left: 0px;
            top: 0px;
        }

        hr {
            padding: 0px;
            margin: 0px;
        }

        ul {
            margin: 0px;
            padding: 0px;
        }

        li {
            list-style: none;
        }

        .item {
            background-color: white;
            padding-top: 2%;
            padding-left: 2%;
        }

        .address {
            font-size: small;
            color: darkgray;
        }

        .name {
            font-size: large;
        }
    </style>
</head>
<body id="app">
<div id="wapper">
    <div class="input-group" id="serach">
        <input type="text" class="form-control" placeholder="请输入地址"/>
        <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
    </div>
    <div id="map">
        <div id="container">

        </div>
    </div>
    <div id="arround">
        <ul>
            <li v-for="item in location">
                <div class="item" @click="adjust(item)">
                    <input type="hidden" name="_lng" class="location" v-model="item._location.lng">
                    <input type="hidden" name="_lat" class="location" v-model="item._location.lat">
                    <div class="name" v-text="item._name"></div>
                    <div class="address" v-text="item._address"></div>
                    <hr>
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript"
        src="http://webapi.amap.com/maps?v=1.3&key=f7eae8b352b4de1f38d9432f688feba3&plugin=AMap.CloudDataSearch"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/CloudDataSearchRender1230.js"></script>
<script src="${pageContext.request.contextPath }/js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            result: [],
            map: null,
            location: null,
            marker: null
        },
        methods: {
            adjust: function (item) {
                var _lng = item._location.lng;
                var _lat = item._location.lat;
                console.log("修改地址 lng : " + _lng + " lat : " + _lat);
                map.setCenter([item._location.lng, item._location.lat]);
                this.dragRemark(map.getCenter());
            },
            dragRemark:function (position) {
                // 隐藏之前的点标记
                if ("undefined" != typeof marker) {
                    console.log(marker)
                    marker.hide();
                }
                // 在新中心点添加 marker
                marker = new AMap.Marker({
                    map: map,
                    position: position,
                    draggable : true
                });

                // 添加拖曳事件
                marker.on("dragend", function () {
                    console.log("拖曳结束!")
                    map.setCenter(marker.getPosition( ));
                });
            }
        },
        created: function () {

            var _self = this;

            /**
             * 创建地图
             */
            map = new AMap.Map('container', {
                resizeEnable: true,
                zoom: 19,
            });

            /**
             *  在新中心点添加 marker
             */
            _self.dragRemark(map.getCenter());


            /**
             * 添加地图点击事件,当用户点击地图时候,地图中心转移
             */
            map.on('click', function (e) {
                // 设置中心点
                map.setCenter([e.lnglat.getLng(), e.lnglat.getLat()]);
                // 设置remark图标
                _self.dragRemark(map.getCenter());
            });

            /**
             * 加载定位插件
             */
            map.plugin('AMap.Geolocation', function () {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 5000,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: false,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                });
                map.addControl(geolocation);
                AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息


                //定位成功
                function onComplete() {
                    // alert("定位完成!")
                    _self.dragRemark(map.getCenter());
                }

                // 定位失败
                function onError() {
                    alert("定位失败!")
                }
            });

            /**
             * 加载云图,及周边搜索功能
             * 地图id 57e8eaeb7bbf191531434b88
             * @type {AMap.LngLat}
             */
            var center = new AMap.LngLat(120.037147, 30.224538);// 这里暂时用指定的数据,到时候需要替换成定位获取的数据
            var searchOptions = {
                keywords: '',
                pageIndex: 1,
                pageSize: 10,
                orderBy: '_id:ASC'
            };
            //构造云数据检索类，您如果想修改结果展现效果，请参考页面：http://lbs.amap.com/fn/css-style/
            var search = new AMap.CloudDataSearch('57e8eaeb7bbf191531434b88', searchOptions);
            //周边检索
            search.searchNearBy(center, 1500, nearBy_CallBack);
            var cloudDataSearchRender = new Lib.AMap.CloudDataSearchRender();

            // 搜索的回调函数
            function nearBy_CallBack(status, result) {
                console.log("result : " + JSON.stringify(result));
                if (status === 'complete' && result.info === 'OK') {
                    _self.location = result.datas;
                }
            }
        }
    });
</script>
<script>
    window.onload = function () {
        console.log(window.screen.height);
        console.log(document.getElementById("arround").offsetTop);
        /**
         * 控制显示周围地点的高度
         */
        $("#arround").height(window.screen.height - document.getElementById("arround").offsetTop + "px");

        /**
         *  触发定位
         */
        $('.amap-geolocation-con').trigger("click");
    };
</script>
</body>
</html>